<script setup>
import { StyleProvider, Themes } from '@varlet/ui'
import { ref } from 'vue'

// 控制主题
const isDarkTheme = ref(true)
// 设置默认主题为深色
StyleProvider(Themes.md3Dark)
</script>

<script>
export default {
  data() {
    return {
      // 底部导航栏激活下标，默认为主页
      footerActive: 'index'
    }
  },
  created() {
    this.footerActive = window.location.href.split('/').pop()
  }
}
</script>

<template>
  <header>
    <var-app-bar title="SWEET-LOVE" title-position="center" />
  </header>

  <main>
    <RouterView />
  </main>

  <!-- 悬浮按钮 -->
  <var-fab type="primary" position="right-bottom" direction="top" drag style="margin-bottom: 120px">
    <!-- 主题切换按钮 -->
    <var-button
      type="info"
      icon-container
      @click="
        () => {
          isDarkTheme = !isDarkTheme
          StyleProvider(isDarkTheme ? Themes.md3Dark : Themes.md3Light)
        }
      "
    >
      <var-icon name="palette-outline" />
    </var-button>
  </var-fab>

  <footer>
    <!-- 回到顶部 -->
    <var-back-top :duration="300" :bottom="80" :right="25" />

    <!-- 底部导航栏 -->
    <var-bottom-navigation
      variant
      v-model:active="footerActive"
      @change="
        (name) => {
          $router.push(name)
        }
      "
    >
      <var-bottom-navigation-item label="获取" icon="magnify" name="query" />
      <var-bottom-navigation-item label="主页" icon="home-outline" name="index" />
      <var-bottom-navigation-item label="投放" icon="heart-outline" name="insert" />
    </var-bottom-navigation>
  </footer>
</template>

<style>
body {
  margin: 0;
  transition:
    background-color 0.25s,
    color 0.25s;
  color: var(--color-text);
  background-color: var(--color-body);
}

header {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  position: fixed;
  padding: 0;
}

main {
  margin-top: 60px;
  padding: 10px;
  padding-bottom: 80px;
}

footer {
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  position: fixed;
}
</style>
